<template>
	<view class="login-sms-box">
		<view class="login-sms-form">
			<xh-form-input title="手机号" v-model="phone" keyboardType="digit" :maxCount="11" placeholder="请填写手机号"></xh-form-input>
			<view class="code-box">
				<text class="form-text">验证码</text>
				<input class="form-input" type="digit" v-model="code" placeholder="请输入短信验证码" :maxlength="6" placeholder-style="font-size: 28rpx;" />
				<view class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="getCodeAction">
					{{isStartTime ? `${seconds}秒后重试` : '获取验证码'}}</view>
				<view class="form-line"></view>
			</view>
		</view>
		<!-- 协议 -->
		<view class="agreement-content">
			<xh-agreement :isSelect="isAgree" @agree="agreeAction"></xh-agreement>
		</view>
		<!-- 底部提交按钮组件 -->
		<xh-submit title="登录" @btnClick="submitLogin"></xh-submit>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onUnload } from '@dcloudio/uni-app'
	import { checkPhone ,sendSmsCode , userLogin} from '@/config/api.js'
	import { useUserStore,useFormStore } from '@/stores'
	const userStore = useUserStore()
	const formStore = useFormStore()
	let timer = null
	//是否同意协议
	const isAgree = ref(false)
	//是否开始倒计时
	const isStartTime = ref(false)
	//手机号
	const phone = ref('')
	//密码
	const password = ref('')
	//验证码
	const code = ref('')
	//倒计时总秒数
	const seconds = ref(60)
	//同意协议方法
	const agreeAction = (value)=>{
		isAgree.value = value
	}
	//获取验证码
	const getCodeAction = () => {
		if (isStartTime.value) {
			return
		}
		if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		}
		checkPhone({ 'phoneNumber': phone.value }).then((res) => {
			const status = res.result.status
			if (status == '1') {
				///校验通过开始获取验证码
				startGetCode()
			} else {
				uni.$tools.showToast('该手机号未注册，请先注册')
			}
		}).catch((error) => {})
	}
	//校验通过开始获取验证码
	const startGetCode = () => {
		sendSmsCode({ 'phoneNumber': phone.value ,"smsType":"smslogin"}).then((res) => {
			startDownTimer()
		}).catch((error) => {})
	}
	//开始倒计时
	const startDownTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = 60
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	// 登录
	const submitLogin = async ()=>{
		if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		}
		else if (uni.$u.test.isEmpty(code.value)) {
			uni.$tools.showToast('请输入短信验证码')
			return
		}
		else if (!isAgree.value) {
			uni.$tools.showToast('请先阅读并同意相关协议')
			return
		}
		let params = {}
		params.smsCode = code.value
		params.phoneNumber = phone.value
		params.loginType = 2
		const res = await userLogin(params)
		userStore.user = res.result
		userStore.showAuth = true
		uni.setStorageSync('token',res.meta.accessToken)
		uni.switchTab({
			url:'/pages/home/home'
		})
	}
	
	//页面卸载了
	onUnload(()=>{
		clearInterval(timer)
	})
	
</script>

<style lang="scss" scoped>
.login-sms-box{
	box-sizing: border-box;
	.login-sms-form{
		background-color: white;
		margin-top: 20rpx;
		.code-box {
			background-color: white;
			height: 100rpx;
			display: flex;
			align-items: center;
			color: $xh-title-color;
			position: relative;
			font-size: 28rpx;
			padding: 0 30rpx;
			.form-text{
				flex-shrink: 0;
				min-width: 120rpx;
			}
			.form-input {
				flex: 1;
				margin-left: 40rpx;
			}
			.form-input-placeholder{
				color: #cccccc;
			}
			.form-line {
				background-color: #D5D5D5;
				height: 1px;
				position: absolute;
				left: 30rpx;
				right: 0;
				bottom: 0;
				transform: scaleY(0.5);
			}
		
			.code-btn {
				margin-left: auto;
				height: 72rpx;
				border-radius: 16rpx;
				line-height: 72rpx;
				text-align: center;
				color: $xh-blue-color;
			}
		
			.code-btn-select {
				color: #cccccc;
			}
		}
	}
	.agreement-content{
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
}
</style>
